<template>
<div>
  <div class="head">
    <div class="h_top">
      <div class="h_logo">
          <span style="display: inline-block;">
            <img src="../../../res/images/index/ustcf.png" style="vertical-align: middle;">
          </span>
      </div>
      <span class="sysname">{{ sysname }}</span>
<!--      <div><li float="right" icon="el-icon-user"/></div>-->
      <div class="gc-right-menu">
        <el-dropdown class="avatar-container" trigger="click">
          <div class="avatar-wrapper">
            <span><li class="el-icon-user"></li></span>
            <span class="avatar-name">{{ $store.state.userName }}</span>
            <i class="el-icon-arrow-down" />
          </div>
          <el-dropdown-menu slot="dropdown" class="user-dropdown">
            <a href="javascript:;" @click="updatePassword">
              <el-dropdown-item>修改密码</el-dropdown-item>
            </a>

            <el-dropdown-item>
              <span style="display:block;" @click="loginOut()">退出</span>
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>

<!--  <el-dialog
    title="修改您的登录密码"
    :visible.sync="dialogFormVisiblePassword"
    :append-to-body="true"
    class="user-dialog"
    text-align="center"
  >
    <el-form
      v-if="dialogFormVisiblePassword"
      ref="updateUserPasswordForm"
      :model="updateUserPasswordForm"
      :rules="dataRulesupdateUpdate"
      label-width="100px"
      size="small"
    >
      <el-form-item label="旧密码" prop="oldPwd" style="width:60%;margin-top: 20px">
        <el-input
          v-model="updateUserPasswordForm.oldPwd"
          type="password"
          autocomplete="off"
          placeholder="请输入旧密码"
          clearable
          show-password-password-f
        ></el-input>
      </el-form-item>
      <el-form-item
        label="新密码"
        prop="newPwd"
        style="width:60%;margin-top: 25px"
      >
        <el-input
          v-model="updateUserPasswordForm.newPwd"
          type="password"
          autocomplete="off"
          placeholder="请输入新密码"
          clearable
          show-password
        ></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" >
      <el-button type="primary" plain @click="dialogFormVisiblePassword = false"
                 style="height:32px;">取消修改</el-button>
      <el-button type="primary"  style="height:32px;" plain @click="updateUserPassword('updateUserPasswordForm')">确定修改</el-button>
    </div>
    &lt;!&ndash;     @blur="updateUserPasswordForm.newPwd = inputChange($event)" &ndash;&gt;
  </el-dialog>-->

  <el-dialog title="重置密码"  :visible.sync="ResetPwdDialogVisible" width="40%"
             @close="ResetPwdDialogVisible=false">
    <el-form :model="resetPwdForm" status-icon :rules="rules" ref="pwdForm"
             label-width="100px">
      <el-form-item label="密码" prop="oldPassword">
        <el-input prefix-icon="iconfont icon-showpassword" placeholder="请输入密码"
                  type="password" v-model="resetPwdForm.oldPassword" autocomplete="off"
                  clearable
                  show-password>
        </el-input>
      </el-form-item>
      <el-form-item label="新密码" prop="newPassword">
        <el-input prefix-icon="iconfont icon-showpassword" placeholder="请输入新密码"
                  type="password" v-model="resetPwdForm.newPassword" autocomplete="off"
                  clearable
                  show-password>
        </el-input>
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPassword">
        <el-input prefix-icon="iconfont icon-showpassword" placeholder="请再次输入新密码"
                  type="password" v-model="resetPwdForm.checkPassword" autocomplete="off"
                  clearable
                  show-password>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"  @click="submitForm('pwdForm')" style="width:64px;height: 32px">确认修改</el-button>
        <el-button type="primary" @click="ResetPwdDialogVisible=false"style="width:64px;height: 32px">取消</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>


</div>
</template>

<script>

export default {
  name: 'Header',
  data() {
    var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        }else if(value !=this.$store.state.password){
          callback(new Error('密码不正确'))
        }else{
          callback()
        }
        };

    var validatePass2 = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.resetPwdForm.newPassword) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      sysname:'考核模块',
      ResetPwdDialogVisible: false,
      resetPwdForm: {
      /*  userName: '',
        oldPassword: '',
        newPassword: '',
        checkPassword:''
*/
      },
      rules: {
        oldPassword: [
          { required: true, message: "请输入原密码", trigger: "blur" },
          { validator: validatePass, message: "原密码不正确", trigger: "blur" },
        ],
        newPassword: [
          { required: true, message: "请输入新密码", trigger: "blur" },
        ],
        checkPassword:[
          {required:true, message:"请确认密码",trigger:"blur"},
          { validator: validatePass2, message: "两次输入的密码不同", trigger: "blur" },

        ]

      },
    }
  },

  methods: {
    loginOut () {
      window.localStorage.clear()
      this.$router.push('/login')
    },
    updatePassword(){
     this.ResetPwdDialogVisible = true
    },
    submitForm (formName) {
      this.resetPwdForm.userName =this.$store.state.userName;
      console.log(this.resetPwdForm)
      this.$refs[formName].validate(async valid => {
        if (!valid) return;
        const form = this.resetPwdForm
        const {status: status} = await this.$axios.put("http://127.0.0.1:8089/userinfo/change/password", {params:
            {
              userName:form.userName,
              oldPassword:form.oldPassword,
              newPassword:form.newPassword
            }});
        if (status !== 200) return this.$message.error('重置密码失败！');
        this.$message.success("重置密码成功，正在跳转登录页面");
        this.$router.push("/login").catch(err => {
          err
        })
      });
    },


  }
}
</script>

<style scoped>
@import '../../../res/css/index.css';
.right-menu {
  float: right;
  height: 100%;
  line-height: 50px;
}

</style>
